<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            margin: 0;
            background-color: black;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <!--<img src="flake.png" alt="">-->
</body>

</html>
<script>
    function createFlake() {
        var width = document.documentElement.clientWidth;
        var height = document.documentElement.clientHeight;
        var top = Math.random() * height;
        var left = Math.random() * width;
        var flake = document.createElement('img');
        document.body.appendChild(flake);
        flake.src = "flake.png";
        // flake.style.width = "30px";
        // flake.style.height = '30px';
        flake.style.position="absolute";
        flake.style.transform='scale('+Math.random()/2+')';
        // flake.style.left = left + 'px';
        // flake.style.top = top + 'px';
        function active(){
            left=left+Math.random()*1;
            top=top+Math.random()*1;
            flake.style.left = left + 'px';
            flake.style.top = top + 'px';
            if(left>width){
                left=-100;
            }
            if(top>height){
                top=-100;
            }
        };
        setInterval(active,50);
    }
    for (var i = 0; i < 50; i++) {
            createFlake();
        }
</script>